<template>
  <div class="equipment-container">
    <div class="seachBox">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="设备：">
          <el-input v-model="formInline.sn" placeholder="请输入设备编号"></el-input>
        </el-form-item>
        <el-form-item label="标签：">
          <el-input v-model="formInline.tag" placeholder="请输入标签"></el-input>
        </el-form-item>
        <div class="searchBut" @click="onSubmit()"><i class="iconfont icon-sousuo"></i> 搜索</div>
      </el-form>
    </div>
    <div class="contBox">
      <div v-for="(item, ind) in tableData" :class="['item', {'active': item.status}]" :key="ind">
        <el-switch v-model="item.status" @change="handleClick(item)" class="switch" active-color="#57CE9E"
                   inactive-color="#AFB6CA"
        ></el-switch>
        <div class="topList">
          <div class="title">
            <div class="iconfont icon-shebei11">
              <svg-icon icon-class="equipment"/>
            </div>
            <div class="text">{{ item.deviceId }}</div>
          </div>
          <div></div>
        </div>
        <div class="labList">
          <div class="tit">设备标签：</div>
          <div class="lables">
            <span v-for="(it, ind) in labHandle(item.tag)" :key="ind" @click="handleRemove(item.deviceId,it)"
            >{{ it }}</span>
            <el-button size="mini" @click="showAddTag(item.deviceId)">+ New Tag</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="noData" v-if="total <= 0">
      <img src="../../../assets/nodata.png" alt="" width="129">
    </div>
    <div class="waterMark"></div>
    <pagination
      v-show="total>15"
      :total="total"
      :page.sync="formInline.pageNum"
      :limit.sync="formInline.pageSize"
      @pagination="getList" />
    <el-dialog
      :visible.sync="addTagVisible"
      width="500px"
      center
    >
      <div
        slot="title"
        class="dialog-title"
      >
        添加设备标签
      </div>

      <el-form
        :model="tagForm"
        :rules="tagRules"
        ref="gps"
        label-width="140px"
      >
        <el-form-item
          prop="subject"
          label="标签名称："
        >
          <el-input
            placeholder="请输入标签名称"
            v-model="tagForm.tags"
            maxlength="20"
            size="small"
          ></el-input>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          @click="addTagVisible = false"
          size="small"
          class="butBox"
        >取 消
        </el-button>
        <el-button
          type="primary"
          @click="AddTag()"
          size="small"
          class="butBox"
          style="margin-left:30px"
        >确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Table from '@/components/iot/Table/index.vue'
import { getDevice, deviceStatus, deviceAddTag, deviceDeleteTag } from '@/api/iot/equipment'

export default {
  name: 'equipment',
  components: {
    Table,
  },
  data() {
    return {
      formInline: {},
      page: 1,
      pageSize: 15,
      total: 0,
      tableData: [],
      tableColumnData: [],
      // 标签是否可见
      addTagVisible: false,
      //GPS指标
      tagForm: {
        tags: '',
        sn: ''
      },
      tagRules: {
        tags: [{ required: true, message: '请输入标签名', trigger: 'blur' }]
      }
    }
  },
  methods: {

    async getList() {
      const data = await getDevice({
        page: this.page,
        pageSize: this.pageSize,
        ...this.formInline
      })
      this.tableData = [...data.rows]
      console.log(data)
      this.total = data.total
    },
    //查询
    onSubmit() {
      this.page = 1
      this.getList()
    },
    //重置表单
    resetForm(refId) {
      this.$refs[refId].resetFields()
      // this.getList();
    },

    labHandle(item) {
      const list = item ? item.split(',') : []
      return list
    },

    async handleClick(row) {
      const data = await deviceStatus({
        sn: row.deviceId,
        status: row.status
      })
      if (!data) {
        this.$message.error(data.message || '请求失败')
      }
    },

    handleSizeChange(val) {
      this.pageSize = val
      this.getList()
    },

    handleCurrentChange(val) {
      this.page = val
      this.getList()
    },

    async handleRemove(deviceId, tagName) {
      // 移除
      this.tagForm.sn = deviceId
      this.tagForm.tags = tagName
      await deviceDeleteTag(this.tagForm).then(res => {
        if (res.data){
          this.getList()
        }
      })
    },

    showAddTag(deviceId) {
      this.addTagVisible = true
      this.tagForm.sn = deviceId
      this.tagForm.tags = ''
    },

    async AddTag() {
      this.addTagVisible = false
      await deviceAddTag(this.tagForm).then(res => {
        if (res.data){
          this.getList()
        }
      })
    }

  },

  mounted() {
    this.getList()
  }
}
</script>
<style lang="scss">
.equipment {
  &-container {
    .el-form--inline .el-form-item__content {
      width: calc(100% - 60px);
    }
  }
}
</style>
<style lang="scss" scoped>
.equipment {
  &-container {
    min-height: calc(100vh - 66px);
    background: #f3f4f7;
    padding: 28px 35px;
    background: #f3f4f7;

    .seachBox {
      padding-left: 10px;
      margin-top: 20px;

      .searchBut {
        display: inline-block;
        position: relative;
        left: 0px;
        width: 89px;
        height: 36px;
        line-height: 38px;
        cursor: pointer;
        text-align: center;
        background: #ffffff;
        border: 1px solid #5584ff;
        border-radius: 4px;
        color: #5584ff;
      }
    }

    .contBox {
      display: flex;
      flex-wrap: wrap;

      .item {
        position: relative;
        margin: 20px 10px;
        width: calc(20% - 20px);
        height: 120px;
        padding: 0 15px;
        background: #ffffff;
        border-radius: 11px;

        .switch {
          display: flex;
          justify-content: flex-end;
          top: 10px;
        }

        .topList {
          display: flex;
          justify-content: space-between;

          .title {
            display: flex;
            position: relative;
            font-size: 14px;
            font-weight: 300;
            text-align: left;
            color: #afb6ca;
            line-height: 25px;

            .iconfont {
              position: relative;
              margin-right: 10px;
              top: -30px;
              display: inline-block;
              width: 38px;
              height: 29px;
              line-height: 29px;
              font-size: 18px;
              background: #9eaec5;
              border-radius: 0px 12px 12px 12px;
              box-shadow: 0px 2px 5px 0px;
              color: #fff;
              text-align: center;
            }

            .text {
              position: relative;
              top: -10px;
            }
          }
        }

        .labList {
          width: 100%;
          display: flex;

          .tit {
            line-height: 23px;
            font-size: 12px;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;
            text-align: left;
            color: #afb6ca;
          }

          .lables {
            height: 76px;
            flex: 1;
            overflow: hidden;

            span {
              display: inline-block;
              text-align: center;
              font-size: 12px;
              padding: 0 18px 0 6px;
              line-height: 18px;
              background: rgba(255, 117, 42, 0.25);
              color: rgba(255, 117, 42, 1);
              border-radius: 4px;
              margin: 4px 4px;
              &::after {
                content: '+';
                position: absolute;
                font-size: 20px;
                font-weight: 200;
                color: #000;
                transform: rotate(225deg);
                -webkit-transform: rotate(225deg);
                -moz-transform: rotate(225deg);
                -ms-transform: rotate(225deg);
                -o-transform: rotate(225deg);
              }
            }

            span:nth-child(2) {
              background: rgba(255, 138, 138, 0.25);
              color: rgba(255, 138, 138, 1);
            }

            span:nth-child(3) {
              background: rgba(83, 138, 217, 0.25);
              color: rgba(83, 138, 217, 1);
            }

            span:nth-child(4) {
              background: rgba(109, 177, 137, 0.25);
              color: rgba(109, 177, 137, 1);
            }

            span:nth-child(5) {
              background: rgba(92, 177, 172, 0.25);
              color: rgba(92, 177, 172, 1);
            }

            span:nth-child(6) {
              background: rgba(190, 160, 93, 0.25);
              color: rgba(190, 160, 93, 1);
            }

            span:nth-child(7) {
              background: rgba(139, 155, 178, 0.25);
              color: rgba(139, 155, 178, 1);
            }

            span:nth-child(8) {
              background: rgba(236, 173, 135, 0.25);
              color: rgba(236, 173, 135, 1);
            }

            .el-button--mini {
              position: relative;
              left: 6px;
              padding: 3px 6px !important;
            }
          }
        }
      }

      .active .iconfont {
        background: linear-gradient(right, #6EC1FF, #5584FF) !important;
      }
    }

    .pagination-container{
      background: transparent;
    }
    @media screen and(max-width: 1366px) {
      .item {
        width: calc(25% - 20px);
      }
    }
  }
}
</style>
